<!--
 * @Description: 
 * @Author: Bart 1714877505@qq.com
 * @Date: 2025-04-24
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-25
-->
<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">现货交易账户</span>
    </div>
    <a-table :defaultExpandAllRows="true" :dataSource="list" :columns="columns" :pagination="pagination" :loading="loading" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <div>
            <a @click="showModal(record)">编辑</a>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { message, Modal, TablePaginationConfig, TableProps } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { computed, ref } from 'vue'

  import { requestUserAddress } from '/@/api/exchange/account'
  const router = useRouter()

  import { useRouter } from 'vue-router'

  import { saveExchangeAccount } from '/@/storage'

  import { getAccountStatusLabel, getAccountTypeLabel } from '../constants'

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    {
      title: '账户地址',
      dataIndex: 'accountAddress',
    },
    {
      title: '关联手机号',
      dataIndex: 'userPhone',
    },
    {
      title: '账户类型',
      dataIndex: 'accountType',
      customRender: ({ text }) => getAccountTypeLabel(text),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '账户状态',
      dataIndex: 'accountStatus',
      customRender: ({ text }) => getAccountStatusLabel(text),
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<AccountTypes.SearchData>({
    accountAddress: '',
    userPhone: '',
    accountType: undefined,
    accountStatus: undefined,
  })

  const list = ref<AccountTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 10
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestUserAddress({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: AccountTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  // 编辑
  const showModal = (info: AccountTypes.IResponse) => {
    saveExchangeAccount(info)
    router.push({
      path: '/account/edit',
    })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped></style>
